<template>
  <div class="login-page">
    <el-card class="box-card">
      <!-- header 插槽 -->
      <template #header>
        <span>FLY-面经运营后台</span>
      </template>

      <!-- 默认插槽 -->
      <template>
        <!-- 
          表单验证：
          el-form 整个 form 组件
            :model 需要绑定一个对象，对象有着很多属性，每个属性都会和表单元素进行双向绑定，明确要校验的是哪个对象
            :rules
          el-form-item 表单域，一行，可以存放格式类型的表单元素
            prop 配置字段名
          el-input 文本框
            v-model
        -->
        <el-form label-position="top" label-width="80px" :model="formLabelAlign" :rules="rules" ref="formLabelAlign">
          <el-form-item label="用户名" prop="username">
            <el-input placeholder="请输入用户名" v-model="formLabelAlign.username"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="请输入密码" v-model="formLabelAlign.password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="clickLogin" :plain="true">登录</el-button>
            <el-button type="info" round @click="clickReset">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-card>
  </div>
</template>

<script>
// 引入请求模块
import { loginRequest } from '@/api/user'

export default {
  name: 'LoginIndexPage',

  data() {
    return {
      formLabelAlign: {
        username: '',
        password: ''
      },

      rules: {
        // 设置对应字段的校验规则，因此名称要和上面统一
        // required: true 表示必填项
        // trigger: 'blur' / 'change' 表示设置校验触发的时机，失焦还是实时校验，可以同时设置，用数组包起来
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        // 也可以设置正则校验：pattern
        // \d  表示0-9
        // \w  表示数字字母下划线
        // {m,n}  表示前一个字符可以出现 m~n 次（包含 m n）
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^\w{5,10}$/, message: '长度在 5 到 10 个字符', trigger: ['blur', 'change'] }
        ]
      }
    }
  },

  mounted() {},

  methods: {
    // 点击提交登录
    async clickLogin() {
      try {
        // 验证用户名密码：
        await this.$refs.formLabelAlign.validate()
        // 验证成功，发起请求：
        const { data } = await loginRequest(this.formLabelAlign)
        // 公司里面实际规范：将 token 等个人信息，存入 vuex，便于各个页面组件访问 => 同时也会存本地存储，为了持久化
        // vuex 中的数据，类似于 data 中的数据，一旦刷新页面，就会重新初始化（vuex刷新数据会初始化，要从本地存储重新拿）
        // 所有访问 token ，访问个人信息，一律找 vuex ，存本地只是为了刷新后 vuex 的数据还在
        // 往 vuex 中存入 token
        this.$store.commit('user/storageToken', data.token)

        // 跳首页：
        this.$router.push('/')

        // 跳转成功提示：
        this.$message({
          message: '恭喜你，登录成功',
          type: 'success'
        })
      } catch (error) {
        console.log(error)
      }
    },

    // 点击重置
    clickReset() {
      this.$refs.formLabelAlign.resetFields()
    }
  },

  created() {},

  computed: {}
}
</script>

<style lang="scss" scoped>
// 如何给标签设置样式：
// 1、给组件标签，加类，添加到类，会自动加上渲染出来的组件的根元素上
// 2、直接使用组件标签名，作为类名控制样式
//    组件库定义组件的规范：声明的所有组件的根元素，都有一个和组件名同名的类名
.login-page {
  min-height: 100vh;
  background: url('@/assets/login-bg.svg') no-repeat center / cover;
  align-items: center;
  display: flex;
  justify-content: center;
  .el-card {
    width: 480px;
    margin: 0 auto;
    font-size: 20px;
    // 因为 scoped 的存在，只会作用于当前模板，导致无法作用于 el-card__header 这个类，除了根元素以外，向下的子组件无法更改
    // 如果希望样式可以向下渗透，影响到下面的子孙后代，需要用到深度作用选择器（vue 提供）
    // 深度作用选择器：
    // 在子组件的类前面加上：
    // ::v-deep  => scss 语法
    // /deep/    => less 语法
    ::v-deep .el-card__header {
      background-color: rgba(69, 201, 157, 0.74);
      text-align: center;
      color: white;
    }
    ::v-deep .el-input__inner {
      border: 1px solid rgba(69, 201, 157, 0.74);
      border-radius: 4px;
    }
    // 按钮居中
    ::v-deep .el-form-item__content {
      text-align: center;
    }
    ::v-deep .el-button {
      margin: 10px;
      font-size: 20px;
    }
  }
}
</style>
